<template>
  <div class="pet-information">
    <!-- navbar -->
    <van-nav-bar title="动物种类详情" fixed left-text="返回" left-arrow @click-left="$router.go(-1)" />
    <!-- 占位 -->
    <div style="height: 46px"></div>
    <!-- 标题 -->
    <div class="bt">{{ detas.p_name }}</div>

    <!-- 图片 -->
    <van-image width="100vw" fit="cover" height="300px" :src="UPL + detas.pet_img" />
    <!-- 身高 -->
    <van-divider :style="{ borderColor: '#ccc' }"></van-divider>
    <div class="sm-bt">身高</div>
    <div class="content-1">
      {{ detas.p_height }}
    </div>
    <!-- 体重 -->
    <van-divider :style="{ borderColor: '#ccc' }"></van-divider>
    <div class="sm-bt">体重</div>
    <div class="content-1">
      {{ detas.p_kg }}
    </div>
    <!-- 原产地 -->
    <van-divider :style="{ borderColor: '#ccc' }"></van-divider>
    <div class="sm-bt">原产地</div>
    <div class="content-1">
      {{ detas.p_ycd }}
    </div>
    <!-- 历史 -->
    <van-divider :style="{ borderColor: '#ccc' }"></van-divider>
    <div class="sm-bt">历史</div>
    <div class="content-1">
      {{ detas.p_history }}
    </div>
    <!-- 个性 -->
    <van-divider :style="{ borderColor: '#ccc' }"></van-divider>
    <div class="sm-bt">个性</div>
    <div class="content-1">
      {{ detas.p_gx }}
    </div>
    <!-- 特征 -->
    <van-divider :style="{ borderColor: '#ccc' }"></van-divider>
    <div class="sm-bt">特征</div>
    <div class="content-1">
      {{ detas.p_feature }}
    </div>
    <!-- 毛色毛质 -->
    <van-divider :style="{ borderColor: '#ccc' }"></van-divider>
    <div class="sm-bt">毛色毛质</div>
    <div class="content-1">
      {{ detas.p_hairy }}
    </div>
  </div>
</template>

<script setup>
import { indexApi } from "@/http/apis/indexApi";
import { ref, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import baseURL from "@/http/baseURL";
let UPL = baseURL.UPL + "/";
// 接收传递过来的大小种类id
let petID = reactive({
  v_id: useRoute().params.v_id,
  p_id: useRoute().params.p_id,
});
// 存放动物详情数据
let detas = ref({});
// 发送请求获取数据
function queryDetails() {
  indexApi.queryDetail(petID).then((res) => {
    detas.value = res.data.msg[0];
  });
}
onMounted(() => {
  queryDetails();
  window.scrollTo(0, 0);
});
</script>

<style lang="scss" scoped>
.bt {
  font-size: 20px;
  font-weight: bolder;
  margin: 15px;
}

.sm-bt {
  border-left: 5px solid blue;
  padding-left: 10px;
  font-size: 17px;
  font-weight: bold;
  margin: 0 0 10px;
}

.content-1 {
  margin: 0 15px;
}
</style>
